<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">技能等级</div>
      <div class="select">
        <el-select v-model="selectItem" placeholder="选择任务">
          <el-option
            v-for="item in periodList"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <div class="catalog">
        <div v-for="(item, i) in allCatArr" :key="i" class="arr">
          <div class="cat-type">{{ item.name }}：</div>
          <div class="stu-names">
            <div v-for="(el, k) in item.catArr" :key="k">
              <el-button
                type="text"
                @click="viewDetail(el)"
                style="text-decoration: underline"
              >
                {{ el.name }}</el-button
              >
            </div>
          
          </div>
        </div>
      </div>
      <div class="sn-body">
        <div class="wrap-container">
          <div class="pd-main">
            <div id="classInfo" class="chart-1"></div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="`学生个人成绩`"
      :append-to-body="true"
      :visible.sync="showDialog"
      :before-close="closeDialog"
      width="75%"
      :center="true"
      :fullscreen="false"
    >
      <div class="container-t">
        <studentScore
        v-if="showDialog"
        class="student-score"
        :allData="allData"
        :currentStudent="currStu"
        :dictData="dictData"
      />
      </div>
      <div slot="footer" class="dialog-footer"> 
        <el-button @click="closeDialog">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getText } from "./../common.js";
import { taskList } from "@/api/taskList";
import { getStudent } from "@/api/stuInfo";
import studentScore from "@/components/bizCompNew/studentScore";

export default {
  name: "catalogChart",
  components: { 
    studentScore
  },
  props: {
    allData: {
      type: Array,
      default() {
        return [];
      },
    },
    dictData: {
      type: Array,
      default() {
        return [];
      },
    },
    currentStudent: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      timer: null,
      number: null,
      arr: [],
      periodList: [],
      selectItem: "",
      num: 0,
      chartData: [],
      dataScore: [],
      allCatArr: [],
      showDialog: false,
      currStu: {}
    };
  },
  watch: {
    allData: {
      handler(val) {
        if (val) {
          val.length && this.getData();
        }
      },
      deep: true,
    },
    selectItem: {
      handler(val) {
        if (val) {
         this.getEchart()
        }
      },
      deep: true,
    },
  },
  created() {
    this.getTaskList();
  },
  mounted() {},
  methods: {
    viewDetail(el) { 
      this.currStu = el
      getStudent(el.stuId).then((res)=> {
        const stu = res.data ? res.data : {}
        Object.assign(this.currStu, stu)
        this.showDialog = true
      })
    },
    closeDialog() {
      this.showDialog = false; 
    },
    getTaskList() {
      taskList().then((response) => {
        // this.periodList = response.rows.map((el) => el.taskName);
      });
    },
    getData() { 
      const list = this.allData.filter((el) => el.scoreType === "1");
      this.chartData = list;
      if (list.length > 0) {
        this.xAxiosNames = list.map((el) => el.period);
        const temp = [];
        list
          .map((el) => el.period)
          .forEach((el) => {
            if (!temp.includes(el)) {
              temp.push(el);
            }
          });
        this.periodList = temp;
        this.selectItem = list[0].period;
      }     

      this.initData();
    },
    initData() {
      this.num = 0;
      this.timer = setInterval(() => {
        this.switchItem();
      }, 3000);
    },
    switchItem() {
      this.num += 1;
      if (this.num > this.periodList.length - 1) {
        this.num = 0;
      }
      const period = this.periodList[this.num]
      this.selectItem = period;
      // this.getEchart();
    },

    formatData() {
      const filterData = this.allData.filter((el) => el.scoreType === '1' && this.selectItem === el.period);
      
      this.dataScore = filterData.map((el) => {
        const sObj = {
          score0: 0,
          score1: 0,
          score2: 0,
          score: 0,
        };
        const tempScore = el.score.split(";");
        tempScore.forEach((s, i) => {
          s.split(",").forEach((k) => {
            sObj[`score${i}`] += Number(k);
          });
        });
        const { score0, score1, score2 } = sObj;
        sObj.score = ((score0 + score1 + score2) / 1.5).toFixed(1);
        sObj.name = el.stuName;
        sObj.stuId = el.stuId;
        sObj.period = el.period;
        sObj.catalogName = getText(sObj.score);
        return sObj;
      });

      this.allCatArr = [
        {
          name: "精匠",
          catArr: [],
          num: 0,
          color: "yellow",
        },
        {
          name: "巧匠",
          catArr: [],
          num: 0,
          color: "green",
        },
        {
          name: "能匠",
          catArr: [],
          num: 0,
          color: "pink",
        },
      ];

      const tempArr = []
      if (this.dataScore.length) {
        this.dataScore.forEach((el) => {
          this.allCatArr.forEach((item) => {
            if (item.name === el.catalogName) {
              const fItme = item.catArr.find(f=> f.period === el.period)
              if (!fItme || fItme.name !== el.name) {  
                if (!tempArr.includes(el.name)) {
                  tempArr.push(el.name)
                  item.catArr.push(el);
                  item.num += 1;
                } 
              }
              
            }
          });
        });
      }
      if (filterData.length) {
        this.selectItem = filterData[0].period;
      }
    },
    getEchart() {
      this.formatData()
      // eslint-disable-next-line no-undef
      let myChart = echarts.init(document.getElementById("classInfo")); // 图标初始化
      const itemData = this.allCatArr.map((el) => {
        return {
          value: el.num,
          name: el.name,
          itemStyle: {
            color: el.color,
          },
        };
      }); 
      if (!this.dataScore.length) {
        myChart.dispose();
        return;
      }
      const option = {
        grid: {
          top: "6%",
        },
        tooltip: {
          trigger: "item",
          formatter: function (data) {
            let message = data.name + "<br/>";
            const value = data.value;
            return `${message}${value}(人)`;
          },
        },
        title: {
          text: "",
          subtext: "",
          left: "center",
        },
        legend: {
          orient: "vertical",
          left: "left",
          textStyle: {
            //图例文字的样式
            color: "#fff",
            fontSize: 16,
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "60%",
            label: {
              fontSize: 18,
              formatter: (params) => {
                return `${params.name}(${params.value}人)`;
              },
            },
            center: ["30%", "50%"],
            data: itemData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.sn-container {
  width: 740px;
  left: 588px;
  top: 94px;

  .pd-main {
    position: absolute;
    height: 100%;
    width: 100%;

    [class^="chart"] {
      position: absolute;
      -webkit-transform-origin: left top;
      -moz-transform-origin: left top;
      -ms-transform-origin: left top;
      -o-transform-origin: left top;
      transform-origin: left top;
    }

    .chart-1 {
      width: 100%;
      height: 450px;
      top: 55%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
  }
}

.select {
  position: absolute;
  right: 0;
}

.catalog {
  width: 306px;
  height: 400px;
  position: absolute;
  top: 96px;
  right: -25px;
  color: #fff;
  font-size: 18px;
  z-index: 9;

  .cat-type {
    width: 100%;
  }

  .arr {
    margin-bottom: 10px;
    // div {
    //   width: 40px;
    // }
  }

  .stu-names {
    display: flex;
    flex-wrap: wrap;
    .el-button {
      width: 40px;
    }
  }
}

.container-t {
  width: 100%;
  height:500px;
} 
</style>
